<template>
  <div class="drag-container">
      <Introduce title="拖拽看板">
        <template #introduce>
            使用vue-draggable封装的组件
        </template>
      </Introduce>

      <DragPannel header="动漫社" headerColor="#61ade8" group="pannel" @end="change" :list="list1"/>
      <DragPannel header="音乐社" headerColor="#e9ba58" group="pannel" @end="change" :list="list2"/>
      <DragPannel header="舞蹈社" headerColor="#b0d17f" group="pannel" @end="change" :list="list3"/>

      <div class="json-show" ref="code">
          <div class="json-text"  >
              <pre><code v-html="json1"></code></pre>
          </div>
          <div class="json-text" >
              <pre><code v-html="json2"></code></pre>
          </div>
          <div class="json-text">
              <pre><code v-html="json3"></code></pre>
          </div>
      </div>
  </div>
</template>

<script>
import DragPannel from '@/components/DragPannel'
import { nextTick, onMounted, reactive,ref } from 'vue'
export default {
    components:{
        DragPannel
    },
    setup(){
        let list1 = reactive([
            {
                content: '龚桂英',
                id: '动漫社-0'
            },
            {
                content: '于涛',
                id: '动漫社-1'
            },
            {
                content: '清雪然',
                id: '动漫社-2'
            }
        ])

        let list2 = reactive([
            {
                content: '唐娟',
                id: '音乐社-0'
            },
            {
                content: '梓欣然',
                id: '音乐社-1'
            },
            {
                content: '吴雪林',
                id: '音乐社-2'
            }
        ])

        let list3 = reactive([
            {
                content: '姜军',
                id: '舞蹈社-0'
            },
            {
                content: '孙一超',
                id: '舞蹈社-1'
            },
            {
                content: '王斐菲',
                id: '舞蹈社-2'
            }
        ])

        const code = ref(null)
        


        const change = ()=>{
            json1.value = JSON.stringify(list1,null,'\t')
            json2.value = JSON.stringify(list2,null,'\t')
            json3.value = JSON.stringify(list3,null,'\t')
        }

        const json1 =  ref(JSON.stringify(list1,null,'\t'))
        const json2 =  ref(JSON.stringify(list2,null,'\t'))
        const json3 =  ref(JSON.stringify(list3,null,'\t'))

        return {list1,list2,list3,json1,json2,json3,change,code}
    }
}
</script>

<style lang="scss" scoped>
.drag-container{
    .dragpannel{
        margin: 0 10px;
    }

    .json-show{
        display: flex;
        .json-text{
          margin: 20px 5px;
          background: #112435;
          padding: 5px;
          color: #fff;
        }
    }
}
</style>